<template>
    <navbar @event="handleClick"></navbar>
    <br>{{mytext}}<br>
    <listbar v-if="isShow"></listbar>
</template>

<script>
import { reactive, toRefs } from 'vue'
import navbar from './ChildComp'
import listbar from './ListComp'

export default {
    components: {
        navbar,
        listbar
    },
    setup () {
        const state = reactive({
            isShow: false,
            mytext: ''
        })
        const handleClick = (sonData) => {
            state.isShow = !state.isShow
            if (state.isShow) state.mytext = sonData
            else state.mytext=''
        }
        return {
            ...toRefs(state),
            handleClick
        }
    }
}
</script>

<style lang="scss" scoped>

</style>